<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
            <el-form-item label="社区名称:">
              <span>{{dataInfo.communityName}}</span>
            </el-form-item>
            <el-form-item label="社区地址:">
              <span>{{dataInfo.provinceName}}{{dataInfo.cityName}}{{dataInfo.areaName}}{{dataInfo.streetName}}{{dataInfo.address}}</span>
            </el-form-item>
            <el-form-item label="小区:">
                <span>{{villageNames }}</span>
            </el-form-item>
            <el-form-item label="详细地址:">
              <span>{{dataInfo.address}}</span>
            </el-form-item>
            <el-form-item label="联系人:">
              <span>{{dataInfo.linkName}}</span>
            </el-form-item>
            <el-form-item label="联系电话:">
              <span>{{dataInfo.linkPhone}}</span>
            </el-form-item>
            <el-form-item label="备用电话:">
              <span>{{dataInfo.linkPhoneTwo}}</span>
            </el-form-item>
            <el-form-item label="经度:">
              <span>{{dataInfo.longitude}}</span>
            </el-form-item>
            <el-form-item label="纬度:">
              <span>{{dataInfo.latitude}}</span>
            </el-form-item>
            <el-form-item label="社区简介:">
              <span>{{dataInfo.introduce}}</span>
            </el-form-item>
            <el-form-item label="备注:">
              <span>{{dataInfo.remark}}</span>
            </el-form-item>
            <el-form-item label="创建人:">
              <span>{{ dataInfo.createUserName}}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ dataInfo.createDate }}</span>
            </el-form-item>
            <el-form-item label="修改人:">
              <span>{{ dataInfo.modifyUserName}}</span>
            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{ dataInfo.modifyDate }}</span>
            </el-form-item>
            <el-form-item label="社区介绍:">
              <span>{{ dataInfo.introduce }}</span>
            </el-form-item>
            <el-form-item label="链接小程序码url" v-if="dataInfo.linkWxAppUrl">
              <el-image class="qrcode" @click.native="downloadByBlob(dataInfo.linkWxAppUrl, '链接小程序码url')"  title="点击可下载" v-if="dataInfo.linkWxAppUrl"
                      :src="dataInfo.linkWxAppUrl" alt="" ></el-image>
                      <!-- :preview-src-list="[dataInfo.linkWxAppUrl]" -->
            </el-form-item>
          <el-form-item label="链接小程序码url" v-if="!dataInfo.linkWxAppUrl">
            <span style="color: red">未 生 成</span>
          </el-form-item>

        </el-row>
        </el-form>
      </div>
    </div>
  </template>

  <script>
  import CommunityApi from '@/api/address/community';
  import LoginApi from "@/api/system/login"
  export default {
    data() {
      return {
        dataInfo: {},
      };
    },
    computed:{
        villageNames(){
            if(this.dataInfo.villages){
                return this.dataInfo.villages.map(item=>item.name).join(',')
            }
        }
    },
    mounted(){
      this.getData()
    },
    methods: {
      getData() {
       CommunityApi.getCommunityInfo({id:this.$route.query.id}).then(res=>{
          this.dataInfo = res.data
        })
      },
      download(href, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.href = href
        eleLink.click()
        eleLink.remove()
      },
      downloadByBlob(url, name) {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = url
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(image, 0, 0, image.width, image.height)
          canvas.toBlob((blob) => {
            let url = URL.createObjectURL(blob)
            this.download(url, name)
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({ path:'/address/communityManagement'})
      }
    },

  }

  </script>
  <style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
  <style lang="scss">
    .qrcode{
      width:150px;
      cursor:pointer;
    }
  </style>
